<template>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
    class="demo-ruleForm" :size="formSize" status-icon>
    <el-form-item label="药房名称:" prop="name">
      <el-input v-model="ruleForm.name" maxlength="50" placeholder="Please input" show-word-limit type="text" />
    </el-form-item>
    <el-form-item label="药库名称" prop="name">
      <el-input v-model="ruleForm.name" maxlength="50" placeholder="Please input" show-word-limit type="text" />
    </el-form-item>
    <el-form-item label="联系人" prop="name">
      <el-input v-model="ruleForm.name" maxlength="50" placeholder="Please input" show-word-limit type="text" />
    </el-form-item>
    <el-form-item label="手机号" prop="name">
      <el-input v-model="ruleForm.name" maxlength="11" placeholder="Please input" show-word-limit type="text" />
    </el-form-item>
    <el-form-item label="调剂系统" prop="region">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="Sponsorship">肖瘤医生</el-radio>
        <el-radio value="Venue">第三方系统</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="处方推送模式" prop="region">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="Sponsorship">自动</el-radio>
        <el-radio value="Venue">手动</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="药房地址" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="药房详细地址" prop="region">
      <el-input v-model="ruleForm.name" maxlength="200" placeholder="Please input" show-word-limit type="textarea" />
    </el-form-item>
    <el-form-item label="药房坐标" prop="region">
      <el-input v-model="ruleForm.name" style="width:300px" maxlength="100" placeholder="Please input" show-word-limit
        type="text" />
    </el-form-item>
    <el-form-item label="药房状态" prop="region">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio value="Sponsorship">正常</el-radio>
        <el-radio value="Venue">下架</el-radio>
        <el-radio value="Venue2">关闭</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="定时关闭" prop="region">

    </el-form-item> <el-form-item label="关闭提示语" prop="region">
      <el-input v-model="ruleForm.name" maxlength="40" placeholder="Please input" show-word-limit type="text" />
    </el-form-item> <el-form-item label="对公账户名称" prop="region">
      <el-input v-model="ruleForm.name" maxlength="200" placeholder="Please input" show-word-limit type="text" />
    </el-form-item> <el-form-item label="开户行" prop="region">
      <el-input v-model="ruleForm.name" maxlength="200" placeholder="Please input" show-word-limit type="text" />
    </el-form-item> <el-form-item label="开户行账号" prop="region">
      <el-input v-model="ruleForm.name" maxlength="19" placeholder="Please input" show-word-limit type="text" />
    </el-form-item>



    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'

  interface RuleForm {
    name : string
    region : string
    count : string
    date1 : string
    date2 : string
    delivery : boolean
    type : string[]
    resource : string
    desc : string
  }

  const formSize = ref('default')
  const ruleFormRef = ref()
  const ruleForm = reactive({
    name: 'Hello',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  const rules = reactive({
    name: [
      { required: true, message: 'Please input Activity name' },
      { min: 0, max: 50, message: 'Length should be 3 to 5' },
    ],
    region: [
      {
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
    date1: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    date2: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
      },
    ],
    resource: [
      {
        required: true,
        message: 'Please select activity resource',
        trigger: 'change',
      },
    ],
    desc: [
      { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
  })

  const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
  }

  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
</script>